<script setup lang="ts">
import type { IndicatorInfo } from '@/types'
import CustomDialog from '@/components/CustomDialog/CustomDialog.vue'

interface Info {
  modelType: string
  done: () => void
}

defineProps<{
  indicators: IndicatorInfo[]
}>()

const emits = defineEmits<{
  (e: 'click-save', o: Info): void
}>()

const rules = {
  modelType: [{ required: true, message: '请选择应用模型' }],
}

const info = ref<Pick<Info, 'modelType'>>({
  modelType: '1',
})

const dialogRef = ref<InstanceType<typeof CustomDialog>>()
function open() {
  dialogRef.value?.open?.()
}
function close() {
  dialogRef.value?.close?.()
}
function clickConfirm(done: () => void) {
  emits('click-save', {
    modelType: info.value.modelType,
    done,
  })
}

defineExpose({
  open,
  close,
})
</script>

<template>
  <CustomDialog
    ref="dialogRef"
    title="绑定应用模型"
    width="640px"
    @confirm="clickConfirm"
  >
    <ElForm :model="info" :rules="rules">
      <p>已勾选的指标：</p>
      <ul style="line-height: 1.6;">
        <li v-for="item in indicators" :key="item.id">
          {{ item.indicatorName }}（{{
            item.indicatorCode
          }}）
        </li>
      </ul>
      <ElFormItem label="应用模型" prop="modelType">
        <DictionaryPicker
          v-model="info.modelType"
          code="YING_YONG_MO_XING"
        />
      </ElFormItem>
    </ElForm>
  </CustomDialog>
</template>
